<template>
  <master title="题目管理">
    <div class="searchForm">
      <div class="searchFormInputs">
        <el-input class="searchFormInput" v-model="params.question" placeholder="按题目查找"></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
      <div class="searchFormBtn">
        <el-button type="danger" icon="el-icon-plus" @click="edit()">增加</el-button>
        <el-button type="primary" @click="showDialog">生成题目</el-button>
      </div>
    </div>
    <div class="el-table">
      <el-table :data="rows" stripe style="width: 100%">
        <el-table-column prop="question" label="题目">
          <template slot-scope="scope">
            <div class="question-text" @click="handleQuestionClick(scope.row.question)">
              <!-- 如果文本过长，则展示省略号，并且点击时弹出完整内容 -->
              {{ getShortText(scope.row.question) }}
              <span v-if="isTextTooLong(scope.row.question)" style="color: #409EFF; cursor: pointer;">... 查看</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="题目类型">
          <template slot-scope="scope">
            <!-- 使用 formatter 将 type 转换为对应的文字 -->
            {{ getTopicType(scope.row.type) }}
          </template>
        </el-table-column>
        <el-table-column prop="answer" label="答案">

        </el-table-column>
        <el-table-column prop="optionsLev" label="选项">
          <template slot-scope="scope">
            <div class="question-text" @click="handleQuestionClick(scope.row.optionsLev)">
              <div v-if="scope.row.type === 1 || scope.row.type === 3">
                <div v-for="(option, index) in processOptions(scope.row.optionsLev)" :key="index" class="option-text">
                  <div>
                    <!-- 显示每个选项的短文本 -->
                    <span>{{ getShortText(option) }}</span>
                  </div>
                </div>
                <!-- 判断是否显示省略号 -->
                <span v-if="isTextTooLong(scope.row.optionsLev)" style="color: #409EFF; cursor: pointer;"
                  @click="handleOptionClick(scope.row.optionsLev)">... 查看</span>
              </div>
              <div v-else>
                <!-- 其他题目类型直接显示选项 -->
                {{ scope.row.optionsLev }}
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="answerComment" label="答案内容">
          <template slot-scope="scope">
            <div class="answerComment-text" @click="handleQuestionClick(scope.row.answerComment)">
              <!-- 如果文本过长，则展示省略号，并且点击时弹出完整内容 -->
              {{ getShortText(scope.row.answerComment) }}
              <span v-if="isTextTooLong(scope.row.answerComment)" style="color: #409EFF; cursor: pointer;">... 查看</span>
            </div>
          </template>
        </el-table-column>
        </el-table-column>
        <el-table-column prop="lev" label="难度等级">
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <div>
              <!-- 编辑按钮 -->
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
              <!-- 删除按钮 -->
              <el-button type="danger" size="mini" icon="el-icon-delete"
                @click="deleteTopic(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="el-pagination">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="params.pageNum"
        :page-sizes="[10, 100, 200, 300, 400]" :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 弹窗显示选项详情 -->
    <el-dialog title="选项详情" :visible.sync="dialogVisible" width="50%">
      <div class="fullAnswer">
        <!-- 使用 el-input 显示选项内容 -->
        <el-input type="textarea" :rows="6" v-model="fullQuestion" readonly></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="isEditMode ? '编辑题目' : '新增题目'" :visible.sync="visible">
      <el-form ref="editForm" :model="editForm" :rules="formRules">
        <!-- 题干输入框 -->
        <el-form-item label="题干" prop="question">
          <el-input v-model="editForm.question" type="textarea" placeholder="请输入题目题干"></el-input>
        </el-form-item>

        <!-- 题目类型选择框 -->
        <el-form-item label="题目类型" prop="type">
          <el-select v-model="editForm.type" placeholder="请选择题目类型">
            <el-option label="选择题" :value="1"></el-option>
            <el-option label="判断题" :value="2"></el-option>
            <el-option label="多选题" :value="3"></el-option>
            <el-option label="填空题" :value="4"></el-option>
            <el-option label="简答题" :value="5"></el-option>
          </el-select>
        </el-form-item>

        <!-- 选择题/多选题的选项 -->
        <el-form-item v-if="editForm.type === 1 || editForm.type === 3" label="选项个数">
          <el-select v-model="editForm.optionCount" placeholder="请选择选项数量" @change="handleOptionCountChange">
            <el-option label="1" :value="1"></el-option>
            <el-option label="2" :value="2"></el-option>
            <el-option label="3" :value="3"></el-option>
            <el-option label="4" :value="4"></el-option>
            <el-option label="5" :value="5"></el-option>
          </el-select>
        </el-form-item>

        <!-- 选择题/多选题的选项输入框 -->
        <el-form-item v-if="editForm.optionCount > 0 && (editForm.type === 1 || editForm.type === 3)" label="选项">
          <div v-for="(option, index) in editForm.optionsLev" :key="index" class="option-input">
            <el-input v-model="editForm.optionsLev[index]"
              :placeholder="'请输入选项 ' + String.fromCharCode(65 + index)"></el-input>
          </div>
        </el-form-item>

        <!-- 选择题/多选题答案选择 -->
        <el-form-item v-if="editForm.type === 1" label="答案" prop="answer">
          <el-select v-model="editForm.answer" placeholder="请选择答案">
            <el-option v-for="(option, index) in editForm.optionsLev" :key="index"
              :label="String.fromCharCode(65 + index)" :value="String.fromCharCode(65 + index)"></el-option>
          </el-select>
        </el-form-item>

        <!-- 判断题 -->
        <el-form-item v-if="editForm.type === 2" label="答案" prop="answer">
          <el-radio-group v-model="editForm.answer">
            <el-radio label="正确">正确</el-radio>
            <el-radio label="错误">错误</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 多选题答案输入框 -->
        <el-form-item v-if="editForm.type === 3" label="答案" prop="answer">
          <el-input v-model="editForm.answer" placeholder="请输入答案（多个选项用 ; 分隔）"></el-input>
        </el-form-item>

        <!-- 填空题的顺序选择 -->
        <el-form-item v-if="editForm.type === 4" label="填空顺序" prop="answerComment">
          <el-radio-group v-model="editForm.answerComment">
            <el-radio label="顺序">顺序</el-radio>
            <el-radio label="乱序">乱序</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 填空题的输入框 -->
        <el-form-item v-if="editForm.type === 4" label="填空" prop="answer">
          <el-input v-model="editForm.answer" placeholder="请输入答案（多个选项用 ; 分隔）"></el-input>
        </el-form-item>

        <!-- 简答题 -->
        <el-form-item label="难度等级" prop="lev">
          <el-input v-model="editForm.lev" placeholder="请输入难度等级"></el-input>
        </el-form-item>

        <el-form-item label="解析" prop="analysis">
          <el-input v-model="editForm.analysis" type="textarea" placeholder="请输入解析"></el-input>
        </el-form-item>

        <!-- 提交和取消按钮 -->
        <el-form-item style="text-align: right;">
          <el-button type="primary" @click="cancel">取消</el-button>
          <el-button type="danger" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <topic-dialog 
      :visible="topicdialogVisible"
      @close="handleClose"
      @saveDraft="handleSaveDraft"
      @confirmPublish="handleConfirmPublish"
      @publishSuccess="handlePublishSuccess">
    </topic-dialog>

  </master>
</template>
<script type="text/javascript">
  (function (G) {
    G.vue({
      "usingComponents": {///引入组件
        "master": "/components/Master/Master",///母版组件
        "topic-dialog": "/components/TopicDialog/TopicDialog"
      },
      "enablePullDownRefresh": true
    }, {
      data: {
        params: {
          pageSize: 10,
          pageNum: 1,
          question: ""
        },
        total: 0,
        rows: [],
        visible: false,
        isEditMode: false, // 新增的状态，用于标识编辑模式
        knowledgePoints: "",  // 输入的知识点
        selectedCourse: null,  // 选中的课程ID
        selectedChapter: null,  // 选中的章节ID
        editForm: {
          id: '',
          type: null,
          optionsLev: [], // 初始化为数组
          answer: '',
          analysis: '',
          optionCount: 0, // 选项数量，默认为 0
        },
        formRules: {
          question: [
            { required: true, message: '题干不能为空', trigger: 'blur' },
            { max: 1000, message: '题干不能超过 1000 个字符', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择题目类型', trigger: 'change' }
          ],
          answer: [
            { max: 1000, message: '答案不能超过 1000 个字符', trigger: 'blur' }
          ],
          lev: [
            { required: true, message: '难度等级不能为空', trigger: 'blur' },
            { max: 10, message: '难度等级不能超过 10 个字符', trigger: 'blur' }
          ],
          analysis: [
            { max: 1000, message: '解析不能超过 1000 个字符', trigger: 'blur' }
          ],
          optionsLev: [
            { max: 500, message: '选项内容不能超过 500 个字符', trigger: 'blur' }
          ],
          answerComment: [
            { max: 1000, message: '不能超过 1000 个字符', trigger: 'blur' }
          ]
        },

        enterprise: [],
        // 用于控制弹窗的显示
        dialogVisible: false,
        topicdialogVisible: false,
        fullQuestion: "",
        courses: [  // 固定的课程数据
          { id: 1313921323726012416, name: "定位系统与地图学" },
          { id: 2, name: "JAVA数据结构" }
        ],
        chapters: [  // 固定的章节数据
          { id: "1313822356568801280", name: "第一章 基础概念" },
          { id: "1313822356568801281", name: "第二章 数据结构" }
        ],
        questionTypes: [
          { label: '单选题', value: 1 },
          { label: '判断题', value: 2 },
          { label: '多选题', value: 3 },
          { label: '填空题', value: 4 },
          { label: '主观题', value: 5 },
        ],
        selectedType: null, // 用来存储选择的题目类型的 value
        questionCount: 1, // 默认题目数量
        difficultyLevels: [
          { label: '简单', value: 1 },
          { label: '中等', value: 2 },
          { label: '困难', value: 3 }
        ], // 题目难度等级
        selectedDifficulty: "简单", // 当前选中的题目难度
        selectedScenario: "结合场景", // 当前选中的题目场景
        difficultyScenario: [
          { label: '结合场景', value: 1 },
          { label: '普通题目', value: 0 },
        ], // 题目场景
        questions: [], // 存储从后端获取的题目
        loading: false, // 加载状态
      },
      options: [
        { label: '单选题', value: 1 },
        { label: '判断题', value: 2 },
        { label: '多选题', value: 3 },
        { label: '填空题', value: 4 },
        { label: '简答题', value: 5 },
      ],

      methods: {
        getQuestionType(type) {
          switch (type) {
            case 1: return "单选题";
            case 2: return "判断题";
            case 3: return "多选题";
            case 4: return "填空题";
            case 5: return "主观题";
            default: return "未知类型";
          }
        },
        getQuestionLevel(lev) {
          switch (lev) {
            case "1": return "简单";
            case "2": return "中等";
            case "3": return "困难";
            default: return "未知类型";
          }
        },
        showDialog() {
          this.topicdialogVisible = true;
        },
        handleClose() {
          this.topicdialogVisible = false;
        },
        handleSaveDraft(questions) {
          console.log('保存草稿', questions);
          // 实现保存草稿的逻辑
        },
        handleConfirmPublish(questions) {
          // 发布成功后刷新列表
          this.getList();
        },
        // 添加发布成功的处理方法
        handlePublishSuccess() {
          // 刷新题目列表
          this.getList();
        },
        // async generateQuestions() {
        //   this.loading = true;
        //   this.questions = []; // 清空之前的题目
        //   // 模拟从后端获取数据
        //   setTimeout(() => {
        //     this.questions = [
        //       {
        //         type: "多选题",
        //         difficulty: "简单",
        //         knowledge: "地图分幅",
        //         description: "常见的地图的分幅方式有（ ）。",
        //         options: [
        //           "A. 在经圈网分幅",
        //           "B. 经纬线分幅",
        //           "C. 矩形分幅",
        //           "D. 栅格分幅",
        //         ],
        //         answer: "B, C",
        //         scoring: "答对得5分，答错整分不得",
        //       },
        //       {
        //         type: "主观题",
        //         difficulty: "中等",
        //         knowledge: "量表法",
        //         description: "量表法有哪些几种类型？",
        //         options: null,
        //         answer:
        //           "量表法可以分为定名量表、顺序量表、间距量表和比率量表四种体系。",
        //         scoring: "答对一种类型得2分，答错不得分",
        //       },
        //     ];
        //     this.loading = false;
        //   }, 1000);
        // },
        // 根据题目类型的数字返回对应的文字
        getTopicType(type) {
          const types = {
            1: "选择题",
            2: "判断题",
            3: "多选题",
            4: "填空题",
            5: "简答题"
          };
          return types[type] || "未知";
        },
        cancel() {
          // 取消时重置表单
          this.$refs.editForm.resetFields();
          this.visible = false; // 关闭对话框
        },
        handleOptionCountChange(value) {
          console.log("选项个数改变:", value);

          // 确保 optionsLev 是一个有效的数组
          if (!Array.isArray(this.editForm.optionsLev)) {
            this.$set(this.editForm, 'optionsLev', []);  // 确保它是一个数组
          }

          let currentLength = this.editForm.optionsLev.length;

          if (currentLength < value) {
            // 如果当前选项数量少于需要的数量，添加空字符串
            for (let i = currentLength; i < value; i++) {
              this.$set(this.editForm.optionsLev, i, '');
            }
          } else if (currentLength > value) {
            // 如果当前选项数量大于需要的数量，删除多余的选项
            this.editForm.optionsLev = this.editForm.optionsLev.slice(0, value);
          }

          console.log("更新后的 optionsLev:", this.editForm.optionsLev);
        },
        // 限制显示的文本长度（例如最大显示50个字符）
        getShortText(text) {
          const maxLength = 40;
          if (text && text.length > maxLength) {
            return text.substring(0, maxLength); // 仅显示前50个字符
          }
          return text;
        },
        getShortTopic(text) {
          const maxLength = 10;
          if (text && text.length > maxLength) {
            return text.substring(0, maxLength); // 仅显示前30个字符
          }
          return text;
        },

        handleOptionClick(optionsLev) {
          // 将 JSON 字符串转换为数组
          try {
            const optionsArray = JSON.parse(optionsLev);

            // 将选项数组中的每个选项连接为换行符分隔的字符串
            this.fullQuestion = optionsArray.join('\n'); // 使用换行符显示每个选项
            this.dialogVisible = true; // 打开弹出框
          } catch (e) {
            console.error("Invalid JSON format:", e);
          }
        },

        // 题目类型变更时处理
        handleTypeChange() {
          // 你可以根据 type 变更时进行其他操作，例如清空选项等
          console.log('题目类型改变:', this.editForm.type);
        },
        // 点击查看更多时触发的事件
        handleQuestionClick(question) {
          this.fullQuestion = question;            // 将完整的题目存储在 fullQuestion 中
          this.dialogVisible = true;               // 打开弹窗
        },
        // 判断文本是否超长
        isTextTooLong(text) {
          const maxLength = 50;
          return text && text.length > maxLength;
        },
        // 处理选项：将选项按字母顺序排列
        // 处理选项：将选项按字母顺序排列
        processOptions(optionsLev) {
          if (!optionsLev) return [];

          // 将选项字符串解析为 JSON 数组
          try {
            const optionsArray = JSON.parse(optionsLev);

            // 限制每个选项的长度，并返回处理后的选项
            return optionsArray.map(option => this.getShortTopic(option));
          } catch (e) {
            console.error("Invalid JSON format:", e);
            return [];
          }
        },

        // 编辑功能
        // 编辑功能
        edit(row) {
          if (row) {
            this.editForm = { ...row };  // 复制编辑的题目数据

            // 如果题目类型是选择题或多选题
            if (this.editForm.type === 1 || this.editForm.type === 3) {
              // 如果 optionsLev 是 JSON 字符串，将其解析为数组
              if (this.editForm.optionsLev) {
                this.editForm.optionsLev = JSON.parse(this.editForm.optionsLev);  // 将选项从 JSON 字符串解析为数组

                // 提取每个选项的文本部分（去掉字母和符号）
                this.editForm.optionsLev = this.editForm.optionsLev.map(option => {
                  const match = option.match(/^[A-Za-z]、(.*)/);  // 匹配字母和符号后面的文本
                  return match ? match[1].trim() : option;  // 如果匹配到，返回文本部分，否则返回原选项
                });

                this.editForm.optionCount = this.editForm.optionsLev.length; // 设置选项数量
              }
            }
          } else {
            this.editForm = {
              id: '',
              question: '',
              type: null,
              optionsLev: [],  // 初始化为空数组
              answer: '',
              analysis: '',
              optionCount: 0, // 默认为 0
            };
          }
          this.visible = true; // 打开弹窗
        },

        save() {
          this.$refs.editForm.validate((valid) => {
            if (valid) {
              if (this.editForm.id) {
                G.put('{JAVAURL}/sp-topic/update', this.editForm).then(res => {
                  if (!res.errorMsg) {
                    this.visible = false
                    G.toask('编辑题目成功')
                    this.params.pageNum = 1
                    this.getList()
                  }
                })
              } else {
                this.editForm.optionsLev = this.editForm.optionsLev.join(';');  // 将选项用 ";" 连接成字符串
                // 如果 optionCount 和 title 存在，直接删除它们
                this.$delete(this.editForm, 'optionCount');
                this.$delete(this.editForm, 'title');
                G.post('{JAVAURL}/sp-topic/add', this.editForm).then(res => {
                  if (!res.errorMsg) {
                    this.visible = false
                    G.toask('添加题目成功')
                    this.params.pageNum = 1
                    this.getList()
                  }
                })
              }
            }
          })
        },
        sizeChange(pageSize) {
          this.params.pageSize = pageSize;
          this.params.pageNum = 1;
          this.getList();
        },
        currentChange(pageNum) {
          this.params.pageNum = pageNum;
          this.getList();
        },
        searchList() {
          this.params.pageNum = 1;
          console.log('查询参数:', this.params);  // 打印 params 看看传递的值
          this.getList();
        },
        // 获取分页数据的函数
        getList() {
          this.loading = true; // 显示加载中状态
          G.get('{JAVAURL}/sp-topic/list', this.params)  // 请输入后端接口，params 传递题目名称和分页参数
            .then((res) => {
              this.loading = false;    // 加载完成
              this.total = res.total;  // 总条数
              this.rows = res.rows;    // 当前页数据
            })
            .catch(() => {
              this.loading = false; // 请求失败时隐藏加载状态
            });
        },
      },
      mounted() {
        this.getList();

      }
    });
  })(Y)
</script>
<style scoped>
  .question-text {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 160px;
    /* 设定最大显示宽度 */
    display: inline-block;

  }

  .question-list {
    flex-grow: 1;
    overflow-y: auto;
    /* 使题目区域可滚动 */
  }

  .question-item {
    border: 1px solid #ebeef5;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    line-height: 1.6;
  }

  .question-type-difficulty {
    display: flex;
    gap: 10px;
    /* 让"单选题"和"中等"之间有间隔 */
  }

  .question-header {
    display: flex;
    justify-content: space-between;
    /* 将内容分为左右 */
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
  }

  .knowledge-point {
    text-align: right;
    font-weight: bold;
    color: #909399;
  }

  .question-desc,
  .options,
  .answer,
  .scoring {
    margin-bottom: 5px;
  }

  .fullAnswer {
    white-space: pre-line;
    /* 保留换行符 */
    padding: 20px;
    line-height: 1.5;
    word-wrap: break-word;
  }


  .dialog-footer {
    position: absolute;
    bottom: 20px;
    /* 固定在右侧区域底部 */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    background-color: #fff;
    /* 背景颜色 */
    padding: 10px 0;
    border-top: 1px solid #ebeef5;
    /* 与题目部分的分隔线 */
  }

  .dialog-content {
    display: flex;
    flex-direction: row;
    height: 100%;
  }

  .correct-answer {
    font-weight: bold;
    color: green;
    /* 或者其他颜色 */
  }

  .dialog-left {
    width: 30%;
    border-right: 1px solid #ebeef5;
    padding: 20px;
  }

  .dialog-right {
    flex-grow: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    /* 使底部按钮定位相对 */
    max-height: 612px;
    /* 设置最大高度 */
    overflow-y: auto;
    /* 超出部分显示滚动条 */
  }


  /* 左侧区域 */
  .dialog-left-area {
    width: 30%;
    border-right: 1px solid #ebeef5;
    padding: 20px;
  }

  /* 右侧题目展示区域 */
  .dialog-right-area {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    /* 给右侧区域设置最小高度 */
    /* 使底部栏相对右侧区域定位 */
  }

  .dialog-footer-area {
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    border-top: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    /* 左右两端对齐 */
  }

  .bottom-button {
    display: flex;
    gap: 10px;
    /* 设置按钮之间的间隔 */
  }

  .bottom-button el-button {
    margin-left: 10px;
    /* 可以添加额外的间距 */
  }

  .dialog-main-content {
    display: flex;
    flex-direction: column;
    /* 垂直排列右侧内容区域和底部按钮区域 */
    flex: 1;
  }

  .block {
    margin-bottom: 20px;
  }

  .block .title {
    font-weight: bold;
    margin-bottom: 10px;
  }



  .answer {
    font-weight: bold;
    color: #67c23a;
  }

  .scoring {
    font-size: 12px;
    color: #909399;
  }

  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .components_Master_Master .title {
    height: auto; 
    line-height: auto;
    flex: 1;
    text-align: center;
  }

  .el-dialog__body {
    padding: 0 !important;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
    font-weight: bold;
  }

  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
  }

  .button-group-father {
    width: 100%;
    /* 使外部容器占满父容器宽度 */
  }

  .button-group {
    display: flex;
    flex-direction: column;
    /* 按列排列 */
    gap: 10px;
    /* 行与行之间的间隔 */
    width: 100%;
    /* 确保按钮组占满父容器宽度 */
    margin-bottom: 10px;
  }

  .button-row {
    display: flex;
    justify-content: space-between;
    /* 均匀分布按钮 */
    width: 100%;
    /* 确保每行宽度占满 */
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .flex-button {
    flex: 1;
    /* 每个按钮平分父容器宽度 */
    margin: 0 5px;
    /* 按钮之间的间隔 */
    border-radius: 20px;
    /* 圆角 */
    height: 40px;
    /* 设置按钮高度 */
    padding: 0;
    /* 去除内边距 */
  }

  .full-width-row {
    display: flex;
    justify-content: center;
    /* 居中对齐简答题按钮 */
    width: 100%;
    /* 确保这一行占满宽度 */
  }

  .full-width-button {
    flex: 1;
    /* 简答题按钮占满整行 */
    margin: 0 5px;
    /* 按钮之间的间隔 */
    border-radius: 20px;
    /* 圆角 */
    height: 40px;
    /* 设置按钮高度 */
    padding: 0;
    /* 去除内边距 */
  }

  .button-row el-button:first-child {
    margin-left: 0;
    /* 去除第一个按钮的左间距 */
  }

  .button-row el-button:last-child {
    margin-right: 0;
    /* 去除最后一个按钮的右间距 */
  }
</style>